<!--
<template>
    <el-row class="panel-group" :gutter="1">
        <el-col>
            <p style="float: left;font-size: 30px;font-weight: bold;color: #8c939d">我的订单</p>
        </el-col>

        &lt;!&ndash;   <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col" v-for="(o, index) in 3" :key="o"
                   :offset="index > 0 ? 1 : 0">
               <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
                   <img src="http://topvision-cv.com/images/website/facerecognition.png"
                        style="margin-left: auto;margin-right: auto;width: 300px">

                   <el-col>
                       <p style="font-size: 16px;font-weight: bold;float: left;padding-left: 20px;color: #b3b3b3">
                           TVH-人脸识别</p>
                       &lt;!&ndash;<p>
                           <img src="../../assets/shenhe.png" style="float: right;margin-right: 100px"/>

                       </p>
                       <p>待审核</p>&ndash;&gt;
                   </el-col>
                   <div style="font-size: 14px;font-weight: bold;float: left;padding-left: 20px;color: #b3b3b3">
                       <p>订单号：1234567890</p>
                       <p>三个月租借方案</p>
                       <p>日期:20180622</p>
                   </div>
                   <div class="card-panel-description">
                       <el-button style="border-radius: 20px;    border: 2px solid #b3b3b3">了解详情</el-button>
                   </div>
               </div>
           </el-col>&ndash;&gt;

        <el-col v-if="!!orders" :xs="6" :sm="6" :lg="4" :offset="1" class="card-panel-col" v-for="obj in orders" :key="obj.orderId">
            <div class='card-panel'>
                <img v-bind:src="obj.order.imgUrl" style="margin-left: auto;margin-right: auto;width: 300px">
                <el-col>
                    <p style="font-size: 16px;font-weight: bold;float: left;padding-left: 20px;color: #b3b3b3">
                        {{obj.orderDetail.productName}}
                    </p>
                    <p v-if="true">
                        <span style="float: right;margin-right: 10px">
                            <img src="../../assets/audited-icon.png"/>
                            <div style="color: #27ADC0;font-size: 14px;font-weight: bold;float: right;margin-top: 8px;margin-left: 5px;">已通过审核</div>
                        </span>
                    </p>
                    <p v-else>
                        <span style="float: right;margin-right: 10px">
                            <img src="../../assets/shenhe.png"/>
                            <div style="color: #757575;font-size: 14px;font-weight: bold;float: right;margin-top: 8px;margin-left: 5px;">待审核</div>
                        </span>
                    </p>
                </el-col>
                <div style="font-size: 14px;font-weight: bold;float: left;padding-left: 20px;color: #b3b3b3">
                    <p>订单号： {{obj.orderId}}</p>
                    <p style="text-align: left;">{{obj.orderDetail.productService}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格：${{obj.orderDetail.productPrice}}</p>
                    <p style="text-align: left;">到期时间: {{obj.orderDetail.outDate | date('YYYY/MM/DD')}}</p>
                </div>
                <div class="card-panel-description">
                    &lt;!&ndash;<el-button style="border: 2px solid #b3b3b3;font-size: 10px;" size="mini" round @click="personal(obj)">了解详情 〉 </el-button>&ndash;&gt;
                    <img src="../../assets/info.png" @click="personal(obj)"/>
                </div>
            </div>
        </el-col>
        <el-col>
            <div style="font-size: 30px;cursor: pointer;text-align: right;margin-top: -250px;color: #8c939d;" @click="getOrders()">
                加载全部订单
            </div>
        </el-col>
        <el-col v-if="!orders" :xs="6" :sm="6" :lg="4" :offset="8" class="card-panel-col">
            <div class='card-panel' style="background-color: inherit;border-radius: 200px;">
                <img src="../../assets/no-order-icon.png" style="margin-left: auto;margin-right: auto;width: 300px">
            </div>
            <el-col>
                <p style="font-size: 16px;font-weight: bold;float: left;padding-left: 60px;color: #6F6F6F">
                    抱歉，目前没有符合的订单！
                </p>
            </el-col>
        </el-col>
        <el-col>
            <p style="float: left;font-size: 30px;font-weight: bold;color: #8c939d">产品推荐</p>
        </el-col>
        <el-col :offset="1">
            <div class="ih-item" v-for="obj in content" :key="obj.id">
                <a href="#">
                    <div class="img">
                        <img v-bind:src="obj.imgUrl" alt="img">
                    </div>
                    <div class="info" style="line-height: 100px" @click=buyproduct(obj)>
                        <h3>{{obj.productName}}</h3>
                    </div>
                </a>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import * as types from '../../store/types'
    import api from '../../axios'
    import dateformat from '../../resource/dateformat-es6.js'
    import ElCol from "element-ui/packages/col/src/col";

    export default {

        components: {ElCol},
        data() {
            return {
                content: '',
                orders: '',
                time: '',
                loading: false,
                pageInfo: {
                    currentPage: 1,
                    pageSize: 4,
                    totalNum: 0
                }
            }
        },
        mounted() {
            this.getProducts();
            this.getOrders(4);
            var date = dateformat.format(new Date(), 'yyyy-MM-dd hh:mm:ss');
            this.time = date;
            console.log(date)
        },
        methods: {
            handleSetLineChartData(type) {
                this.$emit('handleSetLineChartData', type)
            },
            buyproduct(obj) {
                this.$router.push({
                    path: '/product',
                    name: 'product',
                    params: {
                        product: obj
                    }
                })
            },
            getProducts() {
                api.hGet("/api/product/list/0", "", (data) => {
                    if (data.success) {
                        this.content = data.data;
                    }
                });
                console.log(this.content);
            },
            getOrders(pageSize) {
                let url = '/api/order/myOrders?pageSize=' + pageSize;
                api.hPost(url, "", (data) => {
                    if (data.success) {
                        this.orders = data.data;
                    }
                });
            },

            personal(data) {
                this.$message.info("敬请期待...");
                if (data.orderDetail.productName.indexOf("人脸识别") >= 0) {
                    this.$router.push({
                        path: '/home'
                    });
                } else if (data.orderDetail.productName.indexOf("图像识别") >= 0) {
                    this.$router.push({
                        path: '/home'
                    });
                } else {
                    this.$router.push({
                        path: '/home'
                    });
                }

            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .panel-group {
        margin-top: 18px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 40px;
        .card-panel-col {
            margin-bottom: 32px;
        }
        .card-panel {
            width: 300px;
            cursor: pointer;
            font-size: 12px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
            color: rgba(26, 26, 26, 0.8);
            background: #ffffff;
            box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
            border-color: rgba(0, 0, 0, .05);
            border-radius: 10px;
            &:hover {
                .card-panel-icon-wrapper {
                    color: #fff;
                }
                .icon-people {
                    /* background: #40c9c6;*/
                }
                .icon-message {
                    background: #36a3f7;
                }
                .icon-money {
                    background: #f4516c;
                }
                .icon-shoppingCard {
                    background: #34bfa3
                }
            }
            .icon-people {
                color: #40c9c6;
            }
            .icon-message {
                color: #36a3f7;
            }
            .icon-money {
                color: #f4516c;
            }
            .icon-shoppingCard {
                color: #34bfa3
            }
            .card-panel-icon-wrapper {
                //float: ;
                margin: 14px 0 0 14px;
                padding: 16px;
                transition: all 0.38s ease-out;
                border-radius: 6px;
            }
            .card-panel-icon {
                float: left;
                font-size: 48px;
            }
            .card-panel-description {
                float: right;
                font-weight: bold;
                margin: 26px;
                margin-left: 0px;
                margin-top: -37px;
                .card-panel-text {
                    line-height: 10px;
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 10px;
                    margin-bottom: 12px;
                }
                .card-panel-num {
                    font-size: 20px;
                }
            }
        }
    }

    .opacity-black-position {
        width: 150px;
        height: 150px;
        position: relative;
    }

    .opacity-black-position i {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color .5s;
        color: #b3b3b3;
    }

    .opacity-black-position a:hover i {
        background-color: rgba(0, 0, 0, .4);
        margin-left: auto;
        margin-right: auto;
        border-radius: 5px;
    }

    .opacity-black-position .info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        -webkit-backface-visibility: hidden; /* 隐藏旋转元素的背面*/
        backface-visibility: hidden;
        background: rgba(0, 0, 0, 0.4); /*后面这个0.6是指的背景的透明度*/
        opacity: 0;
        -webkit-transition: all 0.35s ease-in-out; /*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    .ih-item {
        position: relative;
        width: 150px;
        height: 150px;
        float: left;
        margin-left: 40px;
    }

    .ih-item .img img {
        position: relative;
        width: 150px;
        height: 150px;
        max-width: 100%;
    }

    .ih-item .info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        -webkit-backface-visibility: hidden; /* 隐藏旋转元素的背面*/
        backface-visibility: hidden;
        background: rgba(0, 0, 0, 0.6); /*后面这个0.6是指的背景的透明度*/
        opacity: 0;
        -webkit-transition: all 0.35s ease-in-out; /*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
        border-radius: 8px;
        color: #ffffff;
    }

    .ih-item a:hover .info {
        opacity: 1; /*有opacity有0变成1*/
    }
</style>
-->
